<!DOCTYPE html>
<html>
<head>
    <% include ../include/css_header.html %>
    <title>活动：<%=act.name %></title>
    <style>
        .input-group{
            margin-bottom: 10px;
        }
        .hide_more{
            display: none;
        }
        #attendlist li{
            overflow: hidden;
        }
    </style>
</head>
<body class="actlist_bg">
    <div class="container">
        <% include ../include/top_bar.html %>
        <div style="text-align: center;color: #ffffff;" class="font_shadow_133000">
            <div style="height: 10px;"></div>
            <div>
                <h2><strong><%=act.name %></strong></h2>
            </div>
            <% if(act.joinCode){ %>
            <div id="act_code">
                <h4><strong>暗号: <%=act.joinCode %></strong>
                    <span id="act_qrcode">(二维码)</span>
                </h4>
            </div>
            <% } %>
            <div style="margin-top:20px">
                <h6>共有<%=act.attendNum %>人参加</h6>
            </div>
        </div>
        <div class="row" style="position: relative;margin: 0;">
            <div class="col-xs-12 bg_op_panel" style="min-height: 400px;">
            <div class="invite_info" style="position: relative;top: 10px;">
                <div style="margin-bottom: 10px;">
                    <img src="/img/<%=act.creator.id %>" alt="头像" class="img-rounded">
                    <label>发起人：</label>
                    <strong style="color: #428bca"><%=act.creator.name %></strong>
                </div>
                <div>
                    <label>时间：</label>
                    <strong style="color: #428bca"><%=startTime %></strong>
                    <strong style="color: #000000">(周<%=day %>)</strong>
                </div>
                <div>
                    <label>地点：</label>
                    <%=act.location %>
                </div>
                <div>
                    <label>说明：</label>
                    <p><%=act.remark %></p>
                </div>
                <% if(!act.hasExpired){%>
                <% if(!hasJoined && act.creator.id !== me.id){ %>
                <div style="margin:30px 0 10px 0" id="joinBtnDiv">
                    <button type="button" class="btn btn-success btn-lg btn-block" id="toJoin" data-loading-text="我来啦...">
                        <strong>我要参加</strong><span class="icon-checkmark"></span>
                    </button>
                </div>
                <% } %>
                <div>
                    <button type="button" class="btn btn-default btn-block toShare">
                        <strong><span class="icon-bubbles"></span> 发给好友/群/朋友圈</strong>
                    </button>
                </div>
                <% }else{ %>
                <div class="bg_white_panel">
                    酒足饭饱，期待下次吧～
                </div>
                <% } %>
                <%
                    var display = (act.attends.length > 0)?'block':'none';
                %>
                <div id="attendDiv" class="hide_more">
                    <div style="margin-top:20px;"><label>参与人：</label></div>
                    <div class="bg_white_panel">
                        <ul id="attendlist">

                        </ul>
                    </div>
                </div>
                <% if(!act.hasExpired && act.creator.id !== me.id && hasJoined){ %>
                <div style="margin-top:20px;">
                    <button type="button" class="btn btn-block" id="toCancel"><strong>取消报名</strong></button>
                </div>
                <% } %>
                <hr>
                <div class="bg_white_panel">
                    <p style="text-align: center">想组织个聚会，开怀畅谈？</p>
                    <button type="button" class="btn btn-info btn-block" id="toStart"><strong>发起一个聚会</strong></button>
                </div>
            </div>
            </div>
        </div>
        <input type="hidden" id="factionId" value="<%=act.belongFaction?act.belongFaction:'' %>"/>
        <!-- 聚会二维码 -->
        <div class="modal fade" id="qrcodeDiv" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body" style="text-align: center">
                        <div><h3>扫码加入聚会～</h3></div>
                        <div id="output"></div>
                    </div>
                </div>
            </div>
        </div>
        <% include ../include/moreinfo.html %>
        <% include ../include/guide_tip.html %>
        <% include ../include/copyright.html %>
    </div>
    <% include ../include/slide_menu.html %>
    <% include ../include/js_footer.html %>
    <script src="/compoments/jquery.qrcode.min.js"></script>
    <script src="<%=_locals.static_js_path %>/invite.js"></script>
    <script type="text/javascript">
        var actId = '<%=act._id %>';
        var needSign = '<%=act.hasContact||act.hasBusiness %>';
        var shareData = {
            link: siteGlobal.SITE_HOST+'/invite/'+actId,
            title: '聚会：<%=act.name %>',
            desc: '发起人:<%=act.creator.name %> \n时间:<%=startTime %> \n内容:<%=act.remark %>'
        }
        $(function(){
            WeixinUtil.initConfig(['onMenuShareTimeline', 'onMenuShareAppMessage'], true, function(){
                WeixinUtil.sharePage(shareData.title, shareData.desc, shareData.img_url, shareData.link)
            })
        })
    </script>
</body>
</html>